<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">&lt;</button>
      <span>{{ year }} 年 {{ month + 1 }} 月</span>
      <button @click="nextMonth">&gt;</button>
    </div>
    <div class="weekdays">
      <span>日</span>
      <span>一</span>
      <span>二</span>
      <span>三</span>
      <span>四</span>
      <span>五</span>
      <span>六</span>
    </div>
    <div class="days">
      <template v-for="(day, index) in daysInMonth">
        <span
            :class="{
            'has-task': hasTask(day),
            'completed': isCompleted(day),
            'pending': isPending(day),
            'now': isToday(day)
          }"
            @mouseover="showDateInfo(day)"
        >
          <el-tooltip :content="showDateInfo(day)" effect="light" placement="bottom">
            <div>{{ day ? day.getDate() : '' }}</div>
          </el-tooltip>
        </span>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "Calendar",
  data() {
    return {
      currentDate: new Date(),
      // 模拟任务数据，格式为 { date: 'YYYY-MM-DD', status: 'completed' | 'pending' }
      tasks: [
        {date: '2025-04-15', status: 'completed'},
        {date: '2025-04-20', status: 'pending'}
      ]
    };
  },
  computed: {
    year() {
      return this.currentDate.getFullYear();
    },
    month() {
      return this.currentDate.getMonth();
    },
    daysInMonth() {
      const firstDay = new Date(this.year, this.month, 1);
      const lastDay = new Date(this.year, this.month + 1, 0);
      const days = [];
      const offset = firstDay.getDay();

      // 填充空白日期
      for (let i = 0; i < offset; i++) {
        days.push(null);
      }

      // 填充当前月的日期
      for (let day = 1; day <= lastDay.getDate(); day++) {
        days.push(new Date(this.year, this.month, day));
      }

      return days;
    }
  },
  methods: {
    prevMonth() {
      this.currentDate = new Date(this.year, this.month - 1, 1);
    },
    nextMonth() {
      this.currentDate = new Date(this.year, this.month + 1, 1);
    },
    hasTask(date) {
      if (!date) return false;
      const formattedDate = this.formatDate(date);
      return this.tasks.some(task => task.date === formattedDate);
    },
    isCompleted(date) {
      if (!date) return false;
      const formattedDate = this.formatDate(date);
      return this.tasks.some(task => task.date === formattedDate && task.status === 'completed');
    },
    isPending(date) {
      if (!date) return false;
      const formattedDate = this.formatDate(date);
      return this.tasks.some(task => task.date === formattedDate && task.status === 'pending');
    },
    isToday(date) {
      if (!date) return false
      const today = new Date()
      return (
          date.getFullYear() === today.getFullYear() &&
          date.getMonth() === today.getMonth() &&
          date.getDate() === today.getDate()
      )
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    showDateInfo(date) {
      if (date) {
        const formattedDate = this.formatDate(date);
        const task = this.tasks.find(t => t.date === formattedDate);
        if (task) {
          return task.status === 'pending' ? '今天有待办任务' : task.status === 'completed' ? '今天有已完成任务' : '无任务'
        } else {
          return '无任务'
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.calendar {
  width: 100%;
  padding: 10px;
  min-height: 30vh;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    button {
      padding: 5px 10px;
      background: none;
      border: none;
      cursor: pointer;

      &:hover {
        background-color: #f0f0f0;
      }
    }
  }

  .weekdays {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;

    span {
      font-size: 12px;
      color: #666;
    }
  }

  .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;

    span {
      text-align: center;
      font-size: 1.5vh;
      padding: 0.5vh;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.2s;

      &:hover {
        background-color: #f0f0f0;
      }
    }

    .has-task {
      font-weight: bold;
    }

    .completed {
      background-color: #A8D0E6;
    }

    .pending {
      background-color: #6B9AC4;
    }

    .now {
      background-color: #a1ffb6;
    }
  }
}
</style>
